<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>定时任务</title>
    <link rel="icon" href="webjars/lxboot3/js/favicon.ico" type="image/png">

    <script src="webjars/lxboot3/js/vue.js"></script>
    <!-- 接口调用-->
    <script src="webjars/lxboot3/js/axios.min.js"></script>
    <script src="webjars/lxboot3/js/clipboard.min.js"></script>
    <!-- 引入组件库 -->
    <script src="webjars/lxboot3/js/element-ui.js"></script>
    <script src="webjars/lxboot3/js/lx.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="webjars/lxboot3/js/element-ui.css">
    <link rel="stylesheet" href="webjars/lxboot3/js/element-ui-display.css">
</head>
<body>
<div id="app">
    <div>
        <h2>任务管理</h2>
        <div class="mb8">
            <el-button type="primary" @click="findJobTablesPage">查询</el-button>
            <el-button type="primary" @click="jobAdd">新增</el-button>
        </div>
        <el-table :data="jobTables" border style="width: 100%; margin-top: 1rem;">
            <el-table-column prop="ljtId" label="任务ID"></el-table-column>
            <el-table-column prop="taskName" label="任务名称"></el-table-column>
            <el-table-column prop="taskCycle" label="任务周期" width="150"></el-table-column>
            <el-table-column prop="className" label="类名" width="300"></el-table-column>
            <el-table-column prop="methodName" label="方法名" width="300"></el-table-column>
            <el-table-column prop="email" label="通知邮箱"></el-table-column>
            <el-table-column prop="addUser" label="添加人" width="100"></el-table-column>
            <el-table-column fixed="right" label="是否启用" width="80">
                <template slot-scope="scope">
                    <el-switch @change="jobChange(scope.row)" v-model="scope.row.isOpen" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="320">
                <template slot-scope="scope">
                    <el-button size="mini" slot="reference" type="primary" @click="jobEdit(scope.row)">修改</el-button>
                    <el-button size="mini" slot="reference" type="success" @click="openUrl('log.html?traceId='+scope.row.ljtId)">日志</el-button>
                    <el-popconfirm @confirm="execJob(scope.row)" confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info" icon-color="red" title="确定要执行吗？">
                        <el-button size="mini" slot="reference" type="warning">手动执行</el-button>
                    </el-popconfirm>
                    <el-popconfirm @confirm="jobDelete(scope.row)" confirm-button-text='确认' cancel-button-text='取消' icon="el-icon-info" icon-color="red" title="确定要删除吗？">
                        <el-button size="mini" slot="reference" type="danger">删除</el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="任务管理" :visible.sync="jobDialogVisible" width="55%" @close="findJobTablesPage()" :close-on-click-modal="false">
            <el-form  :inline="true"  :rules="jobRules" class="demo-ruleForm" ref="jobForm" :model="jobForm" label-width="80px">
                <div>
                    <el-form-item label="任务名称" prop="taskName">
                        <el-input v-model="jobForm.taskName"></el-input>
                    </el-form-item>
                    <el-form-item label="添加人" prop="addUser">
                        <el-input v-model="jobForm.addUser"></el-input>
                    </el-form-item>
                    <el-form-item label="任务周期" prop="taskCycle">
                        <el-select @change="recently(jobForm.taskCycle)" v-model="jobForm.taskCycle" filterable allow-create default-first-option placeholder="请选择任务周期"  @blur.capture.native="!jobForm.taskCycle?'':jobForm.taskCycle=jobForm.taskCycle.trim().split(/\s+/).slice(0,6).join(' ')">
                            <el-option v-for="item in cronOptions" :key="item.value" :label="item.label+' - '+item.value" :value="item.value"></el-option>
                        </el-select>
                        <i class="el-input__icon el-icon-date" @click="openUrl('https://cron.qqe2.com/index-old.html')"></i>
                        <!--                        <el-input v-model="jobForm.taskCycle" @blur="jobForm.taskCycle=jobForm.taskCycle.trim().split(/\s+/).slice(0,6).join(' ')"><i slot="suffix" class="el-input__icon el-icon-date" @click="openCron()"></i></el-input>-->
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="类名" prop="className">
                        <el-input v-model="jobForm.className" @blur="jobForm.className=firstLetterProcess(jobForm.className.trim(),1)"></el-input>
                    </el-form-item>
                    <el-form-item label="方法名" prop="methodName">
                        <el-input v-model="jobForm.methodName"></el-input>
                    </el-form-item>
                    <el-form-item label="通知邮箱" prop="email">
                        <el-input v-model="jobForm.email" style="width: 220px"></el-input>
                    </el-form-item>
                </div>
                <div>
                    <h3>最近10次:</h3>
                    <p v-for="item in jobExecList" :key="item" v-text="item"></p>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="jobDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="jobSave(jobForm)">确 定</el-button>
              </span>
        </el-dialog>

    </div>


</div>
<script type="text/javascript">
    var cronOptions = [1,2,3,4,5,6,10,12,15,20,30].map(v=>{return {value: '0 0/'+v+' * * * ?', label: '每'+v+'分钟',}})
        .concat([1,2,3,4,6,8,12].map(v=>{return {value: '0 0 0/'+v+' * * ?', label: '每'+v+'小时',}}))
    for (let i = 0; i < 1440; i+=30) {
        cronOptions.push({value: '0 '+(i%60)+' '+Math.floor(i/60)+' * * ?', label: '每天'+(i<600?'0':'') + Math.floor(i/60)+':'+((i%60)<10?'0':'')+(i%60),})
    }
    new Vue({
        el: '#app',
        data: function () {
            return {
                cronOptions:cronOptions,
                jobRules:{
                    taskName:[{ required: true, message: '请输入', trigger: 'blur' }, { max: 100, message: '最大100', trigger: 'blur' }],
                    taskCycle:[{ required: true, message: '请输入', trigger: 'blur' },{ pattern: /^([0-9]{1,2}|[0-9]{1,2}\-[0-9]{1,2}|\*|[0-9]{1,2}\/[0-9]{1,2}|[0-9]{1,2}\,[0-9]{1,2})\s([0-9]{1,2}|[0-9]{1,2}\-[0-9]{1,2}|\*|[0-9]{1,2}\/[0-9]{1,2}|[0-9]{1,2}\,[0-9]{1,2})\s([0-9]{1,2}|[0-9]{1,2}\-[0-9]{1,2}|\*|[0-9]{1,2}\/[0-9]{1,2}|[0-9]{1,2}\,[0-9]{1,2})\s([0-9]{1,2}|[0-9]{1,2}\-[0-9]{1,2}|\*|[0-9]{1,2}\/[0-9]{1,2}|[0-9]{1,2}\,[0-9]{1,2}|\?|L|W|C)\s([0-9]{1,2}|[0-9]{1,2}\-[0-9]{1,2}|\*|[0-9]{1,2}\/[0-9]{1,2}|[0-9]{1,2}\,[0-9]{1,2}|JAN|FEB|MAR|APR|MAY|JUN|JUL|AUG|SEP|OCT|NOV|DEC)\s([1-7]{1}|[1-7]{1}\-[1-7]{1}|[1-7]{1}\#[1-7]{1}|\*|[1-7]{1}\/[1-7]{1}|[1-7]{1}\,[1-7]{1}|MON|TUES|WED|THUR|FRI|SAT|SUN|\?|L|C)$/, message: '请输入正确的cron表达式', trigger: 'blur' },],
                    serviceName:[{ required: true, message: '请输入', trigger: 'blur' }, { max: 100, message: '最大100', trigger: 'blur' }],
                    className:[{ required: true, message: '请输入', trigger: 'blur' }, { max: 100, message: '最大100', trigger: 'blur' }],
                    methodName:[{ required: true, message: '请输入', trigger: 'blur' }, { max: 100, message: '最大100', trigger: 'blur' }],
                    addUser:[{ required: true, message: '请输入', trigger: 'blur' }, { max: 100, message: '最大100', trigger: 'blur' }],
                },
                jobTables: [],
                jobDialogVisible:false,
                jobForm:{taskCycle:''},
                jobExecList:[],
            }
        },
        mounted() {
            this.findJobTablesPage();
        },
        methods: {
            recently(){
                // let cron = this.jobForm.taskCycle.split(/\s+/).slice(0,6).join('+').replace('?','%3F');
                this.sysMethod({url:'/lxjob/queryJobTaskExecList',method:'get',params:{cron:this.jobForm.taskCycle}}).then(res=>{
                    this.jobExecList = res.data;
                })
            },
            openUrl(url){
                window.open(url,'_blank');
            },
            execJob(row){
                this.sysMethod({url: '/lxjob/execJob', method: 'post', data: row}).then(res => {
                    this.$message.success('执行成功!');
                });
            },
            jobChange(row) {
                let url = "/lxjob/insertJobTask"
                if (row.ljtId){
                    url = "/lxjob/updateJobTask"
                }
                this.sysMethod({url: url, method: 'post', data: row}).then(res => {
                    this.$message.success('修改成功!');
                    this.jobDialogVisible = false;
                    this.findJobTablesPage();
                });
            },
            jobSave(row){
                this.$refs["jobForm"].validate((valid) => {
                    if (valid){
                        this.jobChange(row);
                    }
                });
            },
            jobAdd(){
                this.jobForm = {isOpen:"1",taskCycle:'0 0/5 * * * ?'};
                this.jobDialogVisible = true;
                this.recently();
                this.$nextTick(()=>{this.$refs['jobForm'].clearValidate()});
            },
            jobEdit(row){
                this.jobForm = row;
                this.jobDialogVisible = true;
                this.recently();
                this.$nextTick(()=>{this.$refs['jobForm'].clearValidate()});
            },
            jobDelete(row) {
                row.isEnabled = '0'
                this.sysMethod({url: "/lxjob/updateJobTask", method: 'post', data: row}).then(res => {
                    this.$message.success('删除成功!');
                    this.findJobTablesPage();
                });
            },
            findJobTablesPage() {
                this.jobTables = [];
                this.sysMethod({url: '/lxjob/queryJobTaskListPage', method: 'get', params: {}}).then(res => {
                    this.jobTables = res.data;
                });
            },
        }
    })
</script>

</body>
</html>
